<style lang="less">
   	#permission .tree{
   		margin: 1px auto;
   	}
   	#permission .addButton{
   		float: right; 
   		margin-right: 10px; 
   		margin-bottom: 10px;
   	}
</style>

<template>
    <div id="permission">
    	<Row :gutter="16" >
    		<Col span="10">
    			<Card style="height: 850px;" >
    				<p slot="title">
			            <Icon type="settings"></Icon>
			            <span>权限管理</span>
			        </p>
		    		<Tabs>
				        <TabPane :label="item.title" v-for="(item,index) in permissionList" :key="index">
				        	<Button @click="addPermission(item, 'firstMenu')" class="addButton" >添加一级菜单</Button>
				        	<ul v-for="(model , index) in item.children" class="tree" style="clear: both; padding: 0 20px;" >
				        		<permission-tree :model="model" :permission_id="permission_id" :flag="'firstMenu'" @addPermission="addPermission" ></permission-tree>
				        	</ul>
				        </TabPane>
				    </Tabs>
		    	</Card>
    		</Col>
    		<Col span="14">
    			<Card style="height: 850px;" >
    				<p slot="title">
			            <Icon type="settings"></Icon>
			            <span>权限详情</span>
			        </p>
			        <div v-if="!permission_id" style="height: 750px; text-align: center; padding-top: 100px;">
			        	<h3>请选择左侧权限，查看权限详情</h3>
			        </div>
    				<permissionInfo v-show="permission_id"></permissionInfo>
    			</Card>
    		</Col>
    	</Row>
        
		<Modal v-model="showAddPermission" title="添加权限路由" width="740" >
			<add-permission v-if="showAddPermission" :permissionProp="permissionProp" @getPermissionList="getPermissionList" @closeModal="showAddPermission = false" ></add-permission>
	        <div slot="footer"></div>
	    </Modal>
		
		<edit-permission v-if="showEditPermission" :permissionProp="permissionProp" v-model="showEditPermission" @getPermissionList="getPermissionList" ></edit-permission>
		
    </div>
</template>

<script>
import permissionTree from './components/permissionTree.vue';
import editPermission from './components/editPermission.vue';
import addPermission from './components/addPermission.vue';
import permissionInfo from './components/permissionInfo.vue';

export default {
    name: 'permission_index',
    components: {
    	permissionTree,
    	editPermission,
    	addPermission,
    	permissionInfo
    },
    data () {
        return {
        	showModelTest: false,
        	permission_id: null,
        	showAddPermission: false,
        	showEditPermission: false,
        	permissionProp: null,
            permissionList: []
        };
    },
    computed: {},
    created(){
	    this.getPermissionList();
	},
	mounted() {
		this.bus.$on('editPermission', (permissionProp, flag) => {
	        this.permissionProp = permissionProp;
    		this.permissionProp.flag = flag;
	        this.showEditPermission = true;
	    }),
	    this.bus.$on('addPermission', (permissionProp, flag) => {
	        this.addPermission(permissionProp, flag);
	    }),
	    this.bus.$on('permission_id', (permission_id) => {
	        this.permission_id = permission_id;
	    }),
	    this.bus.$on('getPermissionList', () => {
	        this.getPermissionList();
	    })
	},
    methods: {
    	getPermissionList(){
    		this.$axios.post(
	        	'/api/Permission/getPermissionList'
	        ).then(res => {
	        	this.permissionList = res.data;
	        });
    	},
    	addPermission(permissionProp, flag){
    		this.permissionProp = permissionProp;
    		this.permissionProp.flag = flag;
	        this.showAddPermission = true;
	    },
    }
};
</script>
